html, body { padding: 0; margin: 0; height: 100%; }
.w_1240 { max-width: 1240px; margin: 0 auto;}
.line1 {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
@mixin inputcolor($color1:#63758a,$color2:#b7c0cc) {
    & input, & textarea { color: $color1;}
    & input::-webkit-input-placeholder { color: $color2;}
    & input:-moz-placeholder { color: $color2;}
    & input::-moz-placeholder { color: $color2;}
    & input:-ms-input-placeholder { color: $color2;}
    & textarea::-webkit-input-placeholder { color: $color2;}
}
.container { box-sizing: border-box; padding: 140px 0 70px 0; background: url("../../../images/bg_01.png") no-repeat center center; background-size: cover; min-height: 100%;}
.main_header { display: flex; justify-content: space-between;}
.quick_access { padding: 20px 20px 0 20px; margin: 0; list-style-type: none; box-sizing: border-box;
    width: 400px; height: 460px; background: rgba(255, 255, 255, 0.65); border-radius: 6px;
    li { margin-bottom: 20px;
        &:last-child { margin-bottom: 0;}
        a { display: flex; align-items: center; text-decoration: none; height: 90px; border-radius: 6px; padding-left: 20px;
            span { padding-left: 26px; font-size: 24px; color: #000000;}
            &:hover {
                box-shadow: 0 0 10px #d9d5d5;
            }
        }
    }
}
.main_header_info { position: relative; z-index: 9; display: flex; height: 168px; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(6px); border-radius: 6px; box-sizing: border-box; padding: 20px 0 0 20px;
    align-items: flex-start;
    .main_header_info_pic {border-radius: 8px; overflow: hidden;
        img { display: block;}
    }
    .main_header_info_text { list-style-type: none; padding: 3px 0; margin: 0 24px; width: 252px;
        li { display: flex; align-items: center; height: 40px; line-height: 40px;
            > span {font-size: 18px; color: rgba(0, 0, 0, 0.85);}
        }
        .main_header_info_type { position: relative; font-size: 16px; color: #30A46C; margin-left: 30px; padding-left: 10px;
            &:after { position: absolute; top: 50%; left: 0; margin-top: -2px; content: ' '; height: 6px; width: 6px; background: #30A46C; border-radius: 50%;}
        }
        .main_header_info_down {
            width: 0; height: 0; margin: 3px 0 0 8px; cursor: pointer;
            border: 4px solid transparent; border-top: 4px solid #909399;
            transition: transform 0.3s ease, border-top-color 0.3s ease;
            &:hover { border-top-color: #409eff; }
        }
        .main_header_info_dropdown { position: relative; display: flex; align-items: center; cursor: pointer;
            &:hover .main_header_info_down { border-top-color: #409eff; }
            &.active .main_header_info_down { transform: rotate(180deg); border-top-color: #409eff; margin-top: 0; }
            .main_header_info_dropdown_list { position: absolute; top: calc(100% + 8px); left: 0; z-index: 9999;
                background: #fff; border: 1px solid #e4e7ed; border-radius: 4px;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                min-width: 200px; max-height: 200px; overflow-y: auto; display: none;
                list-style: none; padding: 6px 0; margin: 0;
                &::before { content: ''; position: absolute; top: -6px; left: 20px;
                    width: 0; height: 0; border: 6px solid transparent; border-bottom-color: #e4e7ed;
                }
                &::after { content: ''; position: absolute; top: -5px; left: 21px;
                    width: 0; height: 0; border: 5px solid transparent; border-bottom-color: #fff;
                }
                li { padding: 0 20px; height: 34px; line-height: 34px; font-size: 14px; color: #606266;
                    cursor: pointer; white-space: nowrap; transition: background-color 0.3s ease;
                    &:hover { background: #f5f7fa; color: #409eff; }
                    &:active { background: #ecf5ff; }
                    &.selected { color: #409eff; font-weight: 500;
                        &::after { content: '✓'; float: right; color: #409eff; margin-left: 10px; }
                    }
                }
            }
        }
    }
    .main_header_card { display: flex; padding: 10px 0 0 0; margin: 0; list-style-type: none;
        li { padding: 1px; margin: 0 20px 0 0; box-sizing: border-box; width: 180px; border-radius: 6px; box-shadow: 0 0 8px 0 #F1F5FF;
            &:last-child { margin-right: 0;}
            &:nth-child(1) { background: linear-gradient(312deg, #87A9FF 0%, #4B7CFB 100%);}
            &:nth-child(2) {background: linear-gradient(312deg, #BCA7FD 0%, #8C6AF3 100%);}
            header { height: 36px; line-height: 36px; font-size: 16px; color: #FFFFFF; padding: 0 15px;}
            main { height: 65px; line-height: 65px; background: #F6F9FF; box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.06);
                padding: 0 15px; border-radius: 6px; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            }
        }
    }
}
.main_header_tab { height: 272px; margin-top: 20px; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(6px); border-radius: 6px; box-sizing: border-box;
    padding: 8px 16px 0 16px;
    .main_header_tab_header { display: flex; justify-content: space-between; list-style-type: none; user-select: none;
        box-sizing: border-box; padding: 4px; margin: 0; height: 42px; background: #ECEFF4; border-radius: 6px;
        li { height: 34px; line-height: 34px; padding: 0 16px; font-size: 16px; color: rgba(0, 0, 0, 0.85); cursor: pointer;
            &.active { background: #4E6CF4; border-radius: 6px; color: #fff;}
        }
    }
    .main_header_tab_table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed;
        th { height: 22px; line-height: 22px; font-size: 14px; color: #4E6CF4; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding: 10px 5px; text-align: left;
        }
        td { line-height: 32px; font-size: 14px; color: #333333; box-sizing: content-box; padding: 0 5px;}
        tr:nth-child(2) {
            td {
                div { padding-top: 4px;}
            }
        }
    }
}
.main_list { margin-top: 20px; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(6px); border-radius: 6px; box-sizing: border-box;
    padding: 20px;
    .main_list_header { display: flex; justify-content: space-between;}
    .main_list_header_s { font-size: 0;
        input { height: 32px; background: #FFFFFF; border-radius: 6px; border: 1px solid #D9D9D9; padding: 0 12px; margin-left: 8px; outline: none;}
        @include inputcolor(#000, rgba(0, 0, 0, 0.25));
    }
    .main_list_table_box { background: #fff; border-radius: 6px; min-height: 420px; margin-top: 20px;}
    .main_list_table { table-layout: fixed; width: 100%;
        tr {
            th, td { height: 42px; line-height: 42px; font-size: 14px; color: #333333;}
            th { text-align: left;}
            td { text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.06);;
                a { color: #1884FF; text-decoration: none;
                    &:hover { text-decoration: underline;}
                }
            }
            .main_list_table_checkbox { text-align: center;
                input { height: 16px; width: 16px; border-color: red; position: relative; top: 2px; }
            }
        }
    }
}
.pager { text-align: center; padding-top: 32px; font-size: 0;
    span { display: inline-block; height: 32px; line-height: 32px; padding: 0 12px; font-size: 14px; color: rgba(0, 0, 0, 0.88);
        margin: 0 4px; cursor: pointer;
        &.pager_btn { background: rgba(0, 0, 0, 0.06); border-radius: 6px;}
        &.pager_input { padding: 0 5px;
            input { background: #FFFFFF; border-radius: 6px; border: 1px solid #D9D9D9; outline: none; height: 32px; width: 45px; text-align: center;}
        }
    }
}
.btn { display: inline-block; border: 1px solid transparent; height: 32px; line-height: 32px; border-radius: 6px; padding: 0 16px;
    color: #fff; cursor: pointer;
    &.btn_type_1 { background: #4E6CF4;
        &:hover { background: #3e5ce6;}
    }
    &.btn_type_2 { background: #1677FF;
        &:hover { background: #0f68e4;}
    }
    &.btn_type_3 { color: #000000; background: transparent;
        border-color: #D9D9D9;
        &:hover { border-color: #1677FF; color: #1677FF;}
    }
}
.ml_15 { margin-left: 15px;}

// 导入弹窗组件样式
@import "../component/dialog.scss";

// 导入flex.scss样式
@import "../flex.css";

// 新建服务弹窗表单
@import "../component/custom-dialog-form.css";

.table-container{
    margin-top: 6px;
}
.table-container::-webkit-scrollbar-track-piece {
  background: rgba(0,0,0,0.1);
  border-radius: 6px;
}

.table-container::-webkit-scrollbar {
   width: 6px;
 }

.table-container::-webkit-scrollbar-thumb {
   background: #99a9bf;
   border-radius: 20px;
 }
